<template>
  <div class="main bright" :class="{bright : !them, dark : them}">
      <el-switch style="position: absolute;left: 10px;top: 10px;" v-model="them" />
      <div class="form">
        <div class="title">SSO 登录系统</div>
        <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        >
            <el-form-item prop="username">
                <el-input v-model="form.username" :prefix-icon="User" placeholder="请输入用户名"/>
            </el-form-item>
            <el-form-item prop="password">
                <el-input v-model="form.password"
                type="password"
                show-password
                :prefix-icon="Lock"
                placeholder="请输入密码"/>
            </el-form-item>
            <el-form-item prop="password" v-if="isRegister">
                <el-input v-model="form.lockPassword"
                type="lockPassword"
                show-password
                :prefix-icon="Lock"
                placeholder="请确认密码"/>
            </el-form-item>
        </el-form>
        <div style="display: flex;justify-content: center;width: 100%;margin-bottom: 20px;">
            <el-button type="primary"
             style="width: 100%;"
             size="large"
             @click="submitForm">{{ isRegister ? '注册' : '登录' }}</el-button>
        </div>
        <el-link type="primary" @click="isRegister = !isRegister">
            {{ isRegister ? '立即登录' : '注册账号' }}
        </el-link>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { login, register } from '@/api/login'
import { ElMessage } from "element-plus";
import { Lock, User } from '@element-plus/icons-vue'
import { useRouter, useRoute } from 'vue-router'
import RealmStore from '@/store/modules/realm'
import { setToken } from '@/utils/auth'
const router = useRouter()

const { realm, url, key, application } = useRoute().query

const realmStore = RealmStore()

realmStore.setRealm(realm)

const form = reactive({
    username : "",
    password : "",
    lockPassword : "",
})

const formRef = ref()
const isRegister = ref(false)

const them = ref(false)

const rules = reactive({
    username: [
        { required: true, message: '用户名不能为空！', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '密码不能为空！', trigger: 'blur' },
        { min: 6, max: 16, message: '最少6位，最大16位', trigger: 'blur' },
    ],
    lockPassword: [
        { required: true, message: '确认密码不能为空！', trigger: 'blur' },
        { min: 6, max: 16, message: '最少6位，最大16位', trigger: 'blur' },
    ],
})

async function submitForm(){
    if (!formRef.value) return
    await formRef.value.validate((valid, fields) => {
        if (valid) {

            if (isRegister.value){
                return Register()
            }

            login(form.username, form.password, realmStore.realm).then(res => {
                if (res.code == 200){
                    setToken(res.data)
                    if (!realm){
                        ElMessage.success("登录成功")
                        router.push("/user")
                    }
                }
            }).catch(()=>{})
        }
    })
}

function Register(){
    if (form.password != form.lockPassword){
        return ElMessage.error("二次密码不一致")
    }

    register({
        realm : realmStore.realm,
        username : form.username,
        password : form.password,
    }).then(res => {
        if (res.code == 200){
            ElMessage.success("注册成功, 请登录")
            setTimeout(() => isRegister.value = false, 700)
        }
    })
}

function resetForm(){
    if (!formRef.value) return
    formRef.value.resetFields()
}

function checkDomain(){

}

checkDomain()

</script>

<style lang="scss" scoped>
::v-deep .el-form-item{
  margin-bottom: 28px;
}
::v-deep .el-input__inner{
  padding: 20px 10px;
}
.bright.main{
  .form {
    background: #FFFFFF;
    box-shadow: 0 7px 25px rgba(0,0,0,.08);
  }
}

.dark.main{
  background: #2c3e50;
  .form{
    background: rgba(252,254,255,.11);
    .title {
      color: #FFFFFF;
    }
  }
}

.main{
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.5s;
  .form{
    width: 400px;
    padding: 30px 30px;
    box-sizing: border-box;
    border-radius: 4px;
    max-width: calc(100% - 60px);
    margin-bottom: calc(8%);
    transition: background 0.5s;
    .title{
      font-size: 22px;
      text-align: center;
      transition: color 0.5s;
      padding-bottom: 30px;
      font-weight: 600;
    }
  }
}
</style>